<template>
  <div>
    <h2>{{ $store.state.count }}</h2>
    <button @click="increment">+1</button>
    <button @click="$store.dispatch('decrementAction')">-1</button>
    <button @click="$store.dispatch('updateStateAction', '200')">200</button>
  </div>
  <hr />
  <button @click="incrementAction">+1</button>
  <button @click="decrementAction">-1</button>
  <button @click="updateStateAction(200)">200</button>
  <hr />
  <button @click="add">add</button>
  <button @click="sub">sub</button>
</template>

<script>
import { mapActions } from "vuex";
export default {
  setup() {
    const actions = mapActions(["incrementAction", "decrementAction", "updateStateAction"])
    const actionsDefine = mapActions({
      "add":"incrementAction",
      "sub":"decrementAction"
    })
    return {
      ...actions,
      ...actionsDefine
    };
  },
};
</script>

<style lang="scss" scoped>
</style>